electronic.alchemy :: Theme Development
electronic.alchemy
where the past meets the future
pike > FinScribe > Theme Development

Theme Development

Created by hww3. Last updated by hww3, 19 years ago. Version #5.

FinScribe's look and feel can be totally customized. The level of customization can vary: you can supply a custom stylesheet that overrides the default, and this provides a number of possibilities as far as customization goes. More complicated changes would require modifying the various templates and scripts that make up the user interface. You can encapsulate the your set of changes in the form of a theme.

A theme is simply a directory containing templates, javascript and auxiliary files like stylesheets and images. At its most basic, a them can consist of an empty directory.

Theme stylesheets

You can customize the stylesheet for the default theme by creating a theme with a single file: style.css. The theme engine will fall back to templates in the default theme when they're not available in the current theme.

Theme templates

The largest component of a theme is a customized version of the FinScribe templates. The theme engine will substitute templates requested by the application with those from the default theme. In this way, you can completely change the look of your application by simply changing two or three template files. The others will be "filled" in from the default theme automatically.

While you can modify any of the files in the templates/ directory for your theme, most of the time, you'll want to change the following files.

The following 6 files affect the overall layout of your application. All of the other templates are designed to make use of these files. As long as you modify these files, all of the remaining templates should automatically update to your new look and feel. These files are (in order of appearance in the construction of a page):

top.phtml (most themes won't need to modify this, it normally just contains the opening tags for the html page)

page content normally is inserted in this position on the page The two following files affect large amounts of the display of content, and are the only "non-layout" template files you'll likely need to provide in your theme. 1 Static files

you can include custom files for use in your theme. Any files located within the theme directory are available to the browser via a special url. To access files, you can use the "theme" macro to fill in the path to the them.

The usage of the theme macro to retrieve the path to the theme is:

<% theme show="path"%>

So, if we had a file called style.css in our theme, we could access it from a template page by using the following:

<link rel="STYLESHEET" type="text/css" href="<% theme show="path"%>style.css"/>

Note that the theme macro appends a trailing slash, so that you can just include the relative path to the file within your theme directory.

JavaScript

the javascript method doThemeSetup() is called, if present, and if running in an AJAX environment. Use this function to set up any event handlers for your pages.

Additionally, the default theme's header file will load a file called functions.js from the current theme. If you don't redefine the header.phtml file, you can insert custom code there. Note that this file will be loaded before any other javascript files, so you can't rely on the presence of Dojo or other features for code that will run at that time.

Not categorized | RSS Feed | BackLinks

comments powered by Disqus